<template>
  <div class="container">
    <div class="position-top">
      <el-cascader
        size="medium"
        style="width: 300px; margin-right: 10px"
        v-model="selectedArea.airportStation"
        ref="CascaderAirportAreaList"
        :options="airportAreaList"
        :props="shopLocationProps"
        placeholder=""
        :disabled="!updateAirportStation"
      >
      </el-cascader>
      <el-button
        type="success"
        size="medium"
        @click="allowUpdateAirportStation"
        v-if="selectedArea.id && !updateAirportStation"
      >
        编辑所属区域
      </el-button>
      <el-button
        type="primary"
        size="medium"
        v-if="selectedArea.id && updateAirportStation"
        @click="confirmSaveArea"
      >
        确认修改
      </el-button>
      <el-button
        type="info"
        size="medium"
        v-if="selectedArea.id && updateAirportStation"
        @click="updateAirportStation = false"
      >
        取消
      </el-button>
    </div>
    <iframe
      src="./fengMap/MaintenancePolygonArea.html"
      ref="MaintenancePolygonArea"
    ></iframe>

    <el-dialog
      title="请选择新增区块所属区域"
      :visible.sync="addAreaVisible"
      width="50%"
      :before-close="handleAddAreaVisibleClose"
    >
      <el-cascader
        size="medium"
        style="width: 100%"
        v-model="selectedArea.airportStation"
        ref="CascaderAirportAreaList"
        :options="airportAreaList"
        :props="shopLocationProps"
        placeholder=""
      >
      </el-cascader>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddAreaVisibleClose">取 消</el-button>
        <el-button type="primary" @click="confirmSaveArea">确认保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { processTreeData } from "@/utils";
export default {
  data() {
    return {
      airportAreaList: [],
      selectedArea: {},
      shopLocationProps: {
        label: "name",
        value: "id",
      },
      updateAirportStation: false,
      addAreaVisible: false,
    };
  },
  mounted() {
    this.getAirportAreaList();
    this.$refs.MaintenancePolygonArea.onload = () => {
      this.$refs.MaintenancePolygonArea.contentWindow.$parent_this = this;
    };
  },
  methods: {
    allowUpdateAirportStation() {
      this.updateAirportStation = true;
    },
    handleAddAreaVisibleClose(done) {
      this.$confirm("关闭后将清空当前绘制数据，确定关闭？").then((_) => {
        this.addAreaVisible = false;
        this.$refs.MaintenancePolygonArea.contentWindow.redraw();
        done();
      });
    },
    confirmSaveArea() {
      if (
        this.selectedArea &&
        this.selectedArea.airportStation &&
        this.selectedArea.airportStation.length
      ) {
        this.addAreaVisible = false;
        this.updateAirportStation = false;
        this.$refs.MaintenancePolygonArea.contentWindow.confirmSaveDraw();
      } else {
        this.$message.error("请先选择所属区域");
      }
    },
    getAirportAreaList() {
      this.$http({
        url: this.$http.adornUrl(
          "/airportStationAssociation/selectAirportStationAssociation"
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        data.forEach((node) => {
          processTreeData(node);
        });
        this.airportAreaList = data;
      });
    },
    reload() {
      this.selectedArea = {};
      this.updateAirportStation = false;
      this.addAreaVisible = false;
      this.updateAirportStation = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: calc(100vh - 180px);
  width: 100%;
  iframe {
    border: none;
    width: 100%;
    height: 100%;
  }

  .position-top {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    width: max-content;
  }
}
</style>
